<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>运营</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="javascript/jquery.js"></script>
    <script src="javascript/plug-ins/customScrollbar.min.js"></script>
    <script src="javascript/plug-ins/echarts.min.js"></script>
    <script src="javascript/plug-ins/layerUi/layer.js"></script>
    <script src="editor/ueditor.config.js"></script>
    <script src="editor/ueditor.all.js"></script>
    <script src="javascript/plug-ins/pagination.js"></script>
    <script src="javascript/public.js"></script>
</head>
<body>
<div class="main-wrap">
    <div class="side-nav">
        <div class="side-logo">
            <div class="logo">
				<span class="logo-ico">
					<i class="i-l-1"></i>
					<i class="i-l-2"></i>
					<i class="i-l-3"></i>
				</span>
                <strong>后台管理</strong>
            </div>
        </div>

        <nav class="side-menu content mCustomScrollbar" data-mcs-theme="minimal-dark">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <i class="icon-columns"></i><a href="table.html">运营</a><i class="icon-angle-right"></i>
                        </dt>
                        <dd>
                            <a href="table.html">客户分析</a>
                        </dd>
                        <dd>
                            <a href="User.html">产品分析</a>
                        </dd>
                        <dd>
                            <a href="shop.html">商户查询</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </nav>



    </div>
    <div class="content-wrap">
        <header class="top-hd">
            <div class="hd-lt">
                <a class="icon-reorder"></a>
            </div>
            <div class="hd-rt">
                <ul>
                    <li>
                        <a href="#" target="_blank"><i class="icon-home"></i>前台访问</a>
                    </li>
                    <li>
                        <a><i class="icon-random"></i>清除缓存</a>
                    </li>
                    <li>
                        <a><i class="icon-user"></i>管理员:<em>DeathGhost</em></a>
                    </li>
                    <li>
                        <a><i class="icon-bell-alt"></i>系统消息</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="JsSignOut"><i class="icon-signout"></i>安全退出</a>
                    </li>
                </ul>
            </div>
        </header>
        <main class="main-cont content mCustomScrollbar">
            <div class="page-wrap">
                <!--开始::内容-->
                <section class="page-hd">
                    <header>
                        <h2 class="title">客户分析</h2>
                    </header>
                    <hr>
                </section>
                <ul class="flex flex-nowrap">
                    <li class="box-child">
                        <div class="panel panel-primary mr-10">
                            <div class="panel-hd">客户总数</div>
                            <div class="panel-bd">
                                2185
                            </div>
                            <div class="panel-bd">
                                美团：1104
                            </div>
                            <div class="panel-bd">
                                饿了么：1001
                            </div>
                        </div>
                    </li>
                    <li class="box-child">
                        <div class="panel panel-secondary mr-10">
                            <div class="panel-hd">新客户</div>
                            <div class="panel-bd">
                                2185
                            </div>
                            <div class="panel-bd">
                                美团：1104
                            </div>
                            <div class="panel-bd">
                                饿了么：1001
                            </div>
                        </div>
                    </li>
                    <li class="box-child">
                        <div class="panel panel-primary">
                            <div class="panel-hd">旧客户</div>
                            <div class="panel-bd">
                                2185
                            </div>
                            <div class="panel-bd">
                                美团：1104
                            </div>
                            <div class="panel-bd">
                                饿了么：1001
                            </div>
                        </div>
                    </li>
                </ul>
                <!--开始::结束-->

                <div class="panel panel-default" style="height: 500px;padding-top: 20px">
                        <div class="panel panel-default" style="height: 500px">
                            <div class="panel-hd">新增数据分析</div>
                            <div class="panel-bd" style="height: 500px">
                                <div id="new_data_analysis" style="height: 100%"></div>
                            </div>
                        </div>
                </div>

                <div class="panel panel-default" style="height: 400px;padding-top: 60px">
                        <div class="panel panel-default" style="height: 400px">
                            <div class="panel-hd">用户性别分析</div>
                            <div class="panel-bd" style="height: 400px">
                                <div id="sex_data_analysis" style="height: 100%"></div>
                            </div>
                        </div>
                </div>

            </div>
        </main>

    </div>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("new_data_analysis");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    option = {
        title: {
            text: '新增数据分析'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增客户数', '美团新增客户数', '饿了么新增客户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2021/6/1', '2021/6/2', '2021/6/3', '2021/6/4', '2021/6/5', '2021/6/6', '2021/6/7']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增客户数',
                type: 'line',
                stack: '总量',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '美团新增客户数',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '饿了么新增客户数',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>

<script type="text/javascript">
    var dom = document.getElementById("sex_data_analysis");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['男性', '女性', '未知']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['美团', '饿了么', '其他平台']
        },
        series: [
            {
                name: '男性',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '女性',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '未知',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>

</body>
</html>
